<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<!-- bootstrap-progressbar -->
<link href="/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<main class="app-content" id="travelDiv">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> 游记</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">游记</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <span v-show="show">
                    <a class="btn btn-success" data-toggle="modal" data-target="#editTravel" style="float: right;">
                    <i class="fa fa-edit m-right-xs"></i>修改游记
                </a>
                </span>

                <div class="tile-body">
                    <h3 align="center" style="color: #5cb85c">
                        {{travel.travelName}}
                    </h3>
                </div>
            </div>
            <div class="tile">
                <div class="tile-body">
                    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item" v-for="(image,index) in travel.images"
                                 :class="[index==0?'active':'']" align="center">
                                <img v-bind:src="image.image" class="d-block" alt="image.imageId"
                                     style="height: 500px;overflow: hidden;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tile">
                <div class="tile-body">
                    <div>
                        <p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{travel.travelDetail}}
                        </p>
                    </div>
                    <span style="float: right;">{{travel.createTime}}</span>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="pages/editTravel"></div>
</main>

<style>
    p {
        color: #8fdf82;
    }
</style>
<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
<script>
    var travelVue = new Vue({
        el: "#travelDiv",
        data: {
            show:false,
            travel: {
                travelId: "",
                travelName: "",
                travelDetail: "",
                createTime: "",
                images: [],
                user:""
            }
        },
        methods: {
            initTravel: function () {
                var self = this;
                var travelId = sessionStorage.getItem("travelId");
                $.ajax({
                    url: "/api/travel/" + travelId,
                    type: "get",
                    success: function (rs) {
                        self.travel = rs;
                        if(String(rs.user.userId)===$("#userId").val()){
                            self.show=true;
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            deleteImage: function (id) {
                var self = this;
                bootbox.confirm({
                    message: "确认删除？",
                    buttons: {
                        confirm: {
                            label: "确定"
                        },
                        cancel: {
                            label: "取消"
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            $.ajax({
                                url: "/api/image/" + id,
                                type: "delete",
                                success: function (rs) {
                                    if (rs.status === 200) {
                                        self.initTravel();
                                    } else {
                                        window.location.href = rs.data;
                                    }
                                },
                                error: function (rs) {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            });
                        }
                    }
                })
            },
            initImage: function () {
                var self = this;
                $("#uploadImage").fileinput({
                    language: "zh",
                    uploadUrl: "/api/upload/travel",
                    allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                    showUpload: true,
                    showRemove: false,
                    showPreview: true,
                    showCaption: true,
                    browseClass: "btn btn-primary",
                    removeClass: "btn btn-danger",
                    dropZoneEnabled: true,
                    maxFileCount: 5,
                    autoReplace: true,//是否可替换
                    layoutTemplates: {
                        actionUpload: ''
                    },
                    enctype: 'multipart/form-data',
                    msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                    validateInitialCount: true,
                }).on('fileerror', function (event, data, msg) {
                    layer.alert("Upload file failed" + msg, {icon: 0});
                }).on('fileuploaded', function (event, data) {
                    if (data.response.status === 200) {
                        console.log(data.response.data)
                        self.travel.images.push({"image": data.response.data})
                    } else {
                        $(".fileinput-remove-button").click();
                    }
                    layer.alert(data.response.message, {icon: 0});
                }).on('fileclear', function (event) {
                });
            },
            updateModule: function () {
                var self = this;
                console.log(self.travel.images)
                $.ajax({
                    url: "/api/travel",
                    type: "put",
                    contentType : "application/json",
                    data:  JSON.stringify(self.travel),
                    success: function (rs) {
                        if (rs.status === 200) {
                            window.location.reload();
                        } else {
                            layer.alert(rs.message, {icon: 0});
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            }
        },
        created: function () {
            window.deleteImage = this.deleteImage;
            window.updateModule=this.updateModule;
        },
        mounted: function () {
            this.initTravel();
            this.initImage();
        }
    })
</script>
